<template>
    <div class="entrepot zy-content ">
        <!--查询条件-->
        <div class="searchBox">
            <Form label-position="left" :label-width="100" class="search-form">
                <Row>
                    <Col span="5">
                    <FormItem label="分类名称：">
                        <Input type="text" v-model="searchParams.name" :placeholder="`${$t('common.inputInfo')}`"
                            class="inputBorder" :maxlength="32"></Input>
                    </FormItem>
                    </Col>
                    <Col span="5" align="center">
                    <Button type="primary" @click="changeNum()"
                        v-if="checkBtnPermission.dmsCategoryGetDmsCategoryTreeList">{{ $t('common.Query') }}</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div class="btns clear">
            <!--            <strong class="creatBtnleft"><Button type="primary" shape="circle">批量删除</Button></strong>-->
            <!--            <span  class="creatBtnright" @click="addDeviceType">-->
            <!--                <span><Icon type="ios-cloud-download-outline" /></span>-->
            <!--                <span class="rightbtn">{{$t('common.Import')}}</span>-->
            <!--            </span>-->
            <span class="creatBtnright" @click="addDeviceType(1)" v-if="checkBtnPermission.dmsCategoryAdd">
                <span>
                    <Icon type="ios-add-circle-outline" />
                </span>
                <span class="rightbtn">添加设备大类</span>
            </span>
        </div>
        <!--表格-->
        <div class="tableContent">
            <Table row-key="id" :columns="columns" :data="dataSource">
                <template slot-scope="{ row }" slot="action">
                    <span class="operationBtn" @click="handleEdit(row)"
                        v-if="checkBtnPermission.dmsCategoryEdit">{{ $t('common.Edit') }}</span>
                    <span class="operationBtn" @click="handleAdd(row)"
                        v-show="(row.level === 1 || row.level === 2) && checkBtnPermission.dmsCategoryAdd">添加</span>
                    <span class="operationBtn" @click="handleDelete(row)"
                        v-if="checkBtnPermission.dmsCategoryDelete">{{ $t('common.Delete') }}</span>
                </template>
            </Table>
        </div>
        <!--分页-->
        <!--        <div class="pageWrap">-->
        <!--            <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />-->
        <!--        </div>-->
        <Modal :mask-closable="false" v-model="firstDeviceVisible" :title="title">
            <Form ref="firstForm" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <FormItem label="设备大类名称：" v-show="level === 2 || level === 3">
                    <span>{{ obj.bigName }}</span>
                </FormItem>
                <FormItem label="设备大类名称：" v-show="level === 1">
                    <Input v-model="formValidate.name" :placeholder="`${$t('common.inputInfo')}`" :maxlength="64" />
                </FormItem>
                <FormItem label="设备中类名称：" v-show="level === 3">
                    <span>{{ obj.middleName }}</span>
                </FormItem>
                <FormItem label="设备中类名称：" v-show="level === 2">
                    <Input v-model="formValidate.levelName2" :placeholder="`${$t('common.inputInfo')}`" :maxlength="64" />
                </FormItem>
                <FormItem label="设备小类名称：" v-show="level === 3">
                    <Input v-model="formValidate.levelName3" :placeholder="`${$t('common.inputInfo')}`" :maxlength="64" />
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="handleFirstCancel">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loadingFirst"
                    @click="handleFirstOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="deleteVisible" title="">
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                <span>{{ $t('common.sureDelete') }}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default" @click="handleDeleteCancel">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loadingDelete"
                    @click="handleDeleteOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    name: "deviceType",
    data() {
        const validateName = (rule, value, callback) => {
            console.log(value)
            if (!value) {
                return callback(new Error('设备名称不能为空！'));
            }
            console.log(value)
            let params = {}
            if (this.isAdd) {
                if (this.level === 1) {
                    params = {
                        name: value
                    }
                } else {
                    params = {
                        name: value,
                        parentId: this.parentId
                    }
                }
            } else {
                if (this.level === 1) {
                    params = {
                        id: this.obj.id,
                        name: value
                    }
                } else {
                    params = {
                        id: this.obj.id,
                        name: value,
                        parentId: this.parentId
                    }
                }
            }

            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/valid',
                params: params
            }).then(res => {

                if (res.code !== 200) {
                    callback(new Error(res.msg));
                } else {
                    callback()
                }
            })
        };
        const validateName1 = (rule, value, callback) => {
            console.log(value)
            if (!value) {
                return callback(new Error('设备名称不能为空！'));
            }
            console.log(value)
            let params = {}
            if (this.isAdd) {
                if (this.level === 1) {
                    params = {
                        name: value
                    }
                } else {
                    params = {
                        name: value,
                        parentId: this.parentId
                    }
                }
            } else {
                if (this.level === 1) {
                    params = {
                        id: this.obj.id,
                        name: value
                    }
                } else {
                    params = {
                        id: this.obj.id,
                        name: value,
                        parentId: this.parentId
                    }
                }
            }

            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/valid',
                params: params
            }).then(res => {

                if (res.code !== 200) {
                    callback(new Error(res.msg));
                } else {
                    callback()
                }
            })
        };
        const validateName2 = (rule, value, callback) => {
            console.log(value)
            if (!value) {
                return callback(new Error('设备名称不能为空！'));
            }
            console.log(value)
            let params = {}
            if (this.isAdd) {
                if (this.level === 1) {
                    params = {
                        name: value
                    }
                } else {
                    params = {
                        name: value,
                        parentId: this.parentId
                    }
                }
            } else {
                if (this.level === 1) {
                    params = {
                        id: this.obj.id,
                        name: value
                    }
                } else {
                    params = {
                        id: this.obj.id,
                        name: value,
                        parentId: this.parentId
                    }
                }
            }

            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/valid',
                params: params
            }).then(res => {

                if (res.code !== 200) {
                    callback(new Error(res.msg));
                } else {
                    callback()
                }
            })
        };
        return {
            message: '',
            title: '',
            level: 1,//等级
            parentId: 0,//父子值
            total: 0,
            pageSize: 10,
            pageNum: 1,
            isAdd: false,
            loadingFirst: false,
            firstDeviceVisible: false,
            deleteVisible: false,
            loadingDelete: false,
            searchParams: {},
            deleteObj: {},
            obj: {},
            checkBtnPermission: {},
            formValidate: {
                name: '',
                levelName2: '',
                levelName3: ''
            },
            ruleValidate: {
                name: [
                    { validator: validateName, trigger: 'blur' }
                ],
                levelName2: [
                    { validator: validateName1, trigger: 'blur' }
                ],
                levelName3: [
                    { validator: validateName2, trigger: 'blur' }
                ],


            },
            pageSizeOption: [10, 20, 30],
            columns: [
                {
                    title: '分类名称',
                    key: 'name',
                    tree: true
                },
                {
                    title: '创建人',
                    key: 'create_by',
                },
                {
                    title: '创建时间',
                    key: 'create_time',
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: 'action',
                    key: '',
                },
            ],
            dataSource: [],
        }
    },
    created() {
        this.searchList()
    },
    mounted() {
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "dmsCategoryAdd") {
                this.checkBtnPermission.dmsCategoryAdd = true
            }
            if (item.code == "dmsCategoryEdit") {
                this.checkBtnPermission.dmsCategoryEdit = true
            }
            if (item.code == "dmsCategoryDelete") {
                this.checkBtnPermission.dmsCategoryDelete = true
            }
            if (item.code == "dmsCategoryGetDmsCategoryTreeList") {
                this.checkBtnPermission.dmsCategoryGetDmsCategoryTreeList = true
            }
        }
    },
    methods: {
        handleEdit(record) {
            
            this.isAdd = false
            if (record.level === 1) {
                this.title = '编辑设备大类'
                this.level = 1
                this.dataSource.forEach(item => {
                    if (item.id === record.id) {
                        this.obj = {
                            bigName: item.name
                        }
                    }
                })
                this.obj.id = record.id
                this.formValidate.name = record.name
            } else if (record.level === 2) {
                this.title = '编辑设备中类'
                this.dataSource.forEach(item => {
                    if (item.children) {
                        item.children.forEach(x => {
                            if (item.id == record.parent_id) {
                                this.obj = {
                                    bigName: item.name,
                                    middleName: x.name
                                }
                            }
                        })
                    }
                })
                this.obj.id = record.id
                this.parentId = record.parent_id
                this.formValidate.levelName2 = record.name
                this.level = 2
            } else {
                this.title = '编辑设备小类'
                this.dataSource.forEach(item => {
                    if (item.children) {
                        item.children.forEach(x => {
                            if (x.children) {
                                x.children.forEach(y => {
                                    console.log(x.id == record.parent_id)
                                    if (x.id == record.parent_id) {
                                        console.log(item, x)
                                        this.obj = {
                                            bigName: item.name,
                                            middleName: x.name
                                        }
                                    }
                                })
                            }
                        })
                    }
                })
                this.obj.id = record.id
                this.formValidate.levelName3 = record.name
                this.parentId = record.parent_id
                this.level = 3
            }
            this.firstDeviceVisible = true
        },
        handleAdd(record) {
            console.log(111, record)
            this.isAdd = true
            this.firstDeviceVisible = true
            if (record.level === 1) {
                // console.log('this.formValidate',this.formValidate);
                this.title = '添加设备中类'
                this.parentId = record.id
                this.obj = {
                    bigName: record.name,
                }
                this.formValidate = {
                    levelName2: ''
                }
                this.level = 2
            } else if (record.level === 2) {
                let bigName;
                this.dataSource.forEach(val => {
                    if (val.children && val.children.length) {
                        val.children.forEach(item => {
                            if (item.name === record.name) {
                                bigName = val.name
                            }
                        })
                    }
                })
                this.obj = {
                    ...this.obj,
                    bigName,
                    middleName: record.name
                }
                this.title = '添加设备小类'
                this.formValidate.levelName3 = ''
                this.parentId = record.id
                this.level = 3
            }

        },
        handleDelete(record) {
            this.deleteObj = {
                id: record.id,
                level: record.level
            }
            this.deleteVisible = true
        },
        handleDeleteCancel() {
            this.deleteVisible = false
        },
        handleDeleteOk() {
            this.axios({
                method: 'delete',
                url: '/dms/dmsCategory/delete',
                data: this.deleteObj
            }).then(res => {

                if (res.code === 200) {
                    this.searchList()
                    this.$Message.success('删除成功！')
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            }).finally(() => {
                this.deleteVisible = false
            })
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let params = {
                // pageNum:this.pageNum,
                // pageSize:this.pageSize,
            };
            for (let key in this.searchParams) {
                if (this.searchParams[key]) {
                    this.$set(params, key, this.searchParams[key])
                }
            }
            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/getDmsCategoryTreeList',
                params: params
            }).then(res => {

                if (res.code === 200) {
                    this.dataSource = res.data
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        //新增
        addDeviceType(level) {
            this.isAdd = true
            this.title = '添加设备大类'
            this.level = level
            this.firstDeviceVisible = true
        },
        validateRules() {
            let params = {}
            if (this.isAdd) {
                if (this.level === 1) {
                    params = {
                        name: this.formValidate.name
                    }
                } else if (this.level === 2) {
                    params = {
                        name: this.formValidate.levelName2,
                        parentId: this.parentId
                    }
                } else {
                    params = {
                        name: this.formValidate.levelName3,
                        parentId: this.parentId
                    }
                }
            } else {
                if (this.level === 1) {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.name
                    }
                } else if (this.level === 2) {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.levelName2,
                        parentId: this.parentId
                    }
                } else {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.levelName3,
                        parentId: this.parentId
                    }
                }
            }
            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/valid',
                params: params
            }).then(res => {

                if (res.code !== 200) {
                    this.message = res.data
                    // this.$Message.warning(res.data)
                } else {
                    // this.$Message.error(res.data)
                }
            })
        },
        handleFirstOk() {
            console.log(123)
            let params = {}
            if (this.isAdd) {
                if (this.level === 1) {
                    params = {
                        name: this.formValidate.name
                    }
                } else if (this.level === 2) {
                    params = {
                        name: this.formValidate.levelName2,
                        parentId: this.parentId
                    }
                } else {
                    params = {
                        name: this.formValidate.levelName3,
                        parentId: this.parentId
                    }
                }
            } else {
                if (this.level === 1) {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.name
                    }
                } else if (this.level === 2) {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.levelName2,
                        parentId: this.parentId
                    }
                } else {
                    params = {
                        id: this.obj.id,
                        name: this.formValidate.levelName3,
                        parentId: this.parentId
                    }
                }
            }
            this.axios({
                method: 'get',
                url: '/dms/dmsCategory/valid',
                params: params
            }).then(res => {

                if (res.code === 200) {
                    this.loadingFirst = true
                    let data1 = {
                        name: this.formValidate.name,
                        level: 1,
                    }
                    let data2 = {
                        name: this.formValidate.levelName2,
                        level: this.level,
                        parentId: this.parentId
                    }
                    let data3 = {
                        name: this.formValidate.levelName3,
                        level: this.level,
                        parentId: this.parentId
                    }
                    let editName = this.level === 1 ? this.formValidate.name : this.level === 2 ? this.formValidate.levelName2 : this.formValidate.levelName3
                    let data = this.level === 1 ? data1 : this.level === 2 ? data2 : data3
                    this.$refs.firstForm.validate((valid) => {
                        console.log(valid)
                        if (valid) {
                            if (this.isAdd) {
                                this.axios({
                                    method: 'post',
                                    url: '/dms/dmsCategory/add',
                                    data: data
                                }).then(res => {

                                    if (res.code === 200) {
                                        this.firstDeviceVisible = false
                                        this.$Message.success('新增成功！')
                                        this.$refs.firstForm.resetFields();
                                        this.searchList()
                                    } else {
                                        this.$Message.error(({ content: res.msg, duration: 6, closable: true }))
                                    }
                                })
                            } else {
                                this.axios({
                                    method: 'put',
                                    url: '/dms/dmsCategory/edit',
                                    data: {
                                        id: this.obj.id,
                                        parantId: this.parentId,
                                        name: editName
                                    }
                                }).then(res => {

                                    if (res.code === 200) {
                                        this.firstDeviceVisible = false
                                        this.$Message.success('编辑成功！')
                                        this.$refs.firstForm.resetFields();
                                        this.searchList()
                                    } else {
                                        this.$Message.error(({ content: res.msg, duration: 6, closable: true }))
                                    }
                                })
                            }
                        }
                    }).finally(() => {
                        this.loadingFirst = false
                    })
                } else if (res.code === 1) {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }))
                } else {
                    this.$Message.error(({ content: res.msg, duration: 6, closable: true }))
                }
            })

        },
        handleFirstCancel() {
            this.firstDeviceVisible = false
            this.formValidate = {}
            // this.$refs.firstForm.resetFields();
        },
    }
}
</script>

<style scoped lang="scss">
.entrepot {
    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }


}
</style>

<style lang="scss"></style>
